<!DOCTYPE html>
<html>
  <head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>
	<title>jTopo Demo</title>
	<meta name="description" content="jTopo免费的基于HTML5 Canvas的网络拓扑、关系图形库">
	<meta name="keyword" content="jTopo 网络 拓扑 图形库 HTML5 Canvas 免费 关系图形库 javascript topology">	

	<link rel="stylesheet" type="text/css" href="../css/base.css">
	<link href="../css/jquery.snippet.min.css" rel="stylesheet">
	
	<script src="../js/jquery.js"></script>
	<script src="../js/site.js"></script>
	<script src="../js/demo.js"></script>
	
	<script type="text/javascript" src="js/snippet/jquery.snippet.min.js"></script>
	
	<script type="text/javascript" src="js/jtopo-min.js"></script>
	<script type="text/javascript" src="js/toolbar.js"></script>
	
	<script id='code'>				
		$(document).ready(function(){					
			var canvas = document.getElementById('canvas');
			var stage = new JTopo.Stage(canvas);
			//显示工具栏
			showJTopoToobar(stage);

			var scene = new JTopo.Scene();	
			scene.background = './img/bg.jpg';
			
			function node(x, y, img){
				var node = new JTopo.Node();
				node.setImage('./img/statistics/' + img, true);				
				node.setLocation(x, y);
				scene.add(node);
				return node;
			}				
			
			function linkNode(nodeA, nodeZ, f){
				var link;
				if(f){
					link = new JTopo.FoldLink(nodeA, nodeZ);
				}else{
					link = new JTopo.Link(nodeA, nodeZ);
				}
				link.direction = 'vertical';
				scene.add(link);
				return link;
			}
			
			var s1 = node(305, 43, 'server.png');
			s1.alarm = '2 W';
			var s2 = node(365, 43, 'server.png');
			var s3 = node(425, 43, 'server.png');
			
			var g1 = node(366, 125, 'gather.png');
			linkNode(s1, g1, true);
			linkNode(s2, g1, true);
			linkNode(s3, g1, true);
			
			var w1 = node(324, 167, 'wanjet.png');
			linkNode(g1, w1);
						
			var c1 = node(364, 214, 'center.png');
			linkNode(w1, c1);
			
			var cloud = node(344, 259, 'cloud.png');
			linkNode(c1, cloud);
			
			var c2 = node(364, 328, 'center.png');
			linkNode(cloud, c2);
			
			var w2 = node(324, 377, 'wanjet.png');
			linkNode(c2, w2);
			
			var g2 = node(366, 411, 'gather.png');
			linkNode(w2, g2);
			
			function hostLink(nodeA, nodeZ){				
				var link = new JTopo.FlexionalLink(nodeA, nodeZ);				
				link.shadow = false;
				link.offsetGap = 44;
				scene.add(link);
				return link;
			}
			var h1 = node(218, 500, 'host.png');
			h1.alarm = '';
			hostLink(g2, h1);
			var h2 = node(292, 500, 'host.png');
			hostLink(g2, h2);
			var h3 = node(366, 500, 'host.png');
			h3.alarm = '二级告警';
			hostLink(g2, h3);
			var h4 = node(447, 500, 'host.png');
			hostLink(g2, h4);
			var h5 = node(515, 500, 'host.png');
			h5.alarm = '1M';
			hostLink(g2, h5);
			
			setInterval(function(){
				if(h3.alarm == '二级告警'){
					h3.alarm = null;
				}else{
					h3.alarm = '二级告警'
				}
			}, 600);
			
			stage.add(scene);
		});
	</script>
  </head>

  <body>

	<center>
	<div class="wrap_div">
		<div class="head_nav">
			<h2 class="logo"><a href="index.html" title="jTopo">jTopo</a></h2>
		</div>		
		<div class="head_nav_second">			
			<ul class="menu" id="nav_menu">
			
			</ul>
		</div>
		<div class="content">
		  <div class="left">
			<ul id="menu">
			
			</ul>
		  </div>
		  <div class="right">
				<div id="content">					<canvas width="850" height="550" id="canvas"></canvas>	
					
				</div>
		  </div>
		  <div class="clear"></div>
		</div>
	</div>
	</center>
	<div class="footer">
		&nbsp;
	</div>
  <script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1000418207'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "v1.cnzz.com/z_stat.php%3Fid%3D1000418207%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>
</body>

</html>